Skip to content

EDM-4152: Make all form alerts full width#696

Draft
celdrake wants to merge 1 commit into
flightctl:mainfrom
celdrake:EDM-4152-full-width-form-alerts
Draft

EDM-4152: Make all form alerts full width#696
celdrake wants to merge 1 commit into
flightctl:mainfrom
celdrake:EDM-4152-full-width-form-alerts

Conversation

@celdrake

@celdrake celdrake commented Jun 12, 2026

Copy link
Copy Markdown
Collaborator

Alerts within forms were not full-width, now we can use FlightCtlFormAlert for that purpose.
Before:

form-alerts-before

After:
form-alerts

@coderabbitai

coderabbitai Bot commented Jun 12, 2026

Copy link
Copy Markdown

Review Change Stack

Walkthrough

This PR introduces FlightCtlFormAlert, a custom wrapper around PatternFly's Alert component that renders alerts inline and applies form-aware CSS grid span. The new component is exported from FlightCtlForm and replaces direct Alert usage across 13 wizard step components spanning Catalog, Device, Fleet, and ImageBuild workflows.

Changes

Alert Component Migration

Layer / File(s) Summary
FlightCtlFormAlert component and styling
libs/ui-components/src/components/form/FlightCtlForm.tsx, libs/ui-components/src/components/form/FlightCtlForm.css
New FlightCtlFormAlert export wraps Alert with isInline={true} by default and applies .fctl-form-alert CSS class. FlightCtlForm computes formSpan from responsive width and passes it to Grid and CSS custom property for alert layout.
Catalog wizard steps migration
libs/ui-components/src/components/Catalog/EditWizard/steps/UpdateStep.tsx, libs/ui-components/src/components/Catalog/InstallWizard/steps/AppConfigStep.tsx, libs/ui-components/src/components/Catalog/InstallWizard/steps/ReviewStep.tsx, libs/ui-components/src/components/Catalog/InstallWizard/steps/SelectTargetStep.tsx, libs/ui-components/src/components/Catalog/InstallWizard/steps/SpecificationsStep.tsx
Remove PatternFly Alert imports and replace all inline alert renders (version updates, config schema validation errors, deprecation warnings, deployment failures, provisioning info) with FlightCtlFormAlert equivalents.
Device edit wizard steps migration
libs/ui-components/src/components/Device/EditDeviceWizard/steps/ApplicationTemplates.tsx, libs/ui-components/src/components/Device/EditDeviceWizard/steps/ConfigurationTemplates.tsx, libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceTemplateStep.tsx, libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceUpdateStep.tsx
Remove PatternFly Alert imports and replace inline alerts (catalog-managed resource notices, repository loading errors, MicroShift warnings, template variable guidance, system image management notices) with FlightCtlFormAlert.
Fleet and ImageBuild steps migration
libs/ui-components/src/components/Fleet/CreateFleet/steps/DeviceLabelSelector.tsx, libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdatePolicyStep.tsx, libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdateStepRolloutPolicy.tsx, libs/ui-components/src/components/ImageBuilds/CreateImageBuildWizard/steps/OutputImageStep.tsx
Remove PatternFly Alert imports and replace inline alerts (device selection errors/hints, default policy info, batch sequencing guidance, management-ready notices) with FlightCtlFormAlert.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

ui-components

Suggested reviewers

  • rawagner

Poem

A custom alert now wraps the form with grace,
Thirteen components find their rightful place.
Inline, responsive, and styled just right—
PatternFly alerts bow out of sight.
Grid spans align from left to end,
One wrapper to rule them, on this we depend. ✨

🚥 Pre-merge checks | ✅ 14 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
I18n-Compliance ⚠️ Warning DeviceTemplateStep.tsx uses user-visible label="MicroShift registration" without wrapping it in t(); no variable-key t() calls were found in the scanned TSX files. Wrap the string in translation, e.g. label={t('MicroShift registration')} (or use the appropriate translation component for that label).
✅ Passed checks (14 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main change: introducing full-width form alerts by creating FlightCtlFormAlert and replacing PatternFly Alerts across 13 component files.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
No-Hardcoded-Secrets ✅ Passed Checked all files touched per PR summary (15 TS/TSX/CSS) for embedded-credential URLs, Bearer/Authorization strings, base64 data/quoted secrets, private-key markers, and credential-like assignments...
No-Weak-Crypto ✅ Passed Scanned the PR’s referenced TS/TSX/CSS files for md5/sha1/des/rc4/3des/blowfish/ecb and crypto-related keywords; none found, so no weak/non-constant-time crypto introduced.
No-Injection-Vectors ✅ Passed Scanned the PR’s changed files at commit 0e956e1 for eval/exec, dangerouslySetInnerHTML, os.system/exec.Command, and yaml.load/SafeLoader; no matches found.
Container-Privileges ✅ Passed PR #696 changes only UI TSX/CSS files (FlightCtlFormAlert) and contains no container/K8s privilege settings (hostPID/hostNetwork/hostIPC/privileged/SYS_ADMIN/allowPrivilegeEscalation).
No-Sensitive-Data-In-Logs ✅ Passed Inspected PR-touched TSX/CSS (incl. FlightCtlForm.tsx); no console/loggers/Sentry/track calls found in those files, and FlightCtlFormAlert only wraps PatternFly Alert without logging.
Resource-Leaks ✅ Passed Scanned proxy/**/*.go for os.Open, http client.Do/ReadAll without resp.Body.Close, net dial, and goroutine spawning. Found body closes in all http calls (incl. handler.go explicit Close) and only 2...
Unchecked-Errors ✅ Passed PR #696 only modifies TS/CSS files (per GitHub files list); no Go files under proxy/ are changed, so the _ error-return/swallo​wing rule isn’t applicable.
Ai-Attribution ✅ Passed No AI attribution trailers (Assisted-by/Generated-by/Made-with/Co-Authored-By) found in PR description or repo text; only config mentions the terms.
Generated-Files-Not-Hand-Edited ✅ Passed PR diff vs main touches only ui-components/FormAlert-related files; none of libs/types/** or libs/i18n/locales/en/translation.json were edited.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@libs/ui-components/src/components/form/FlightCtlForm.tsx`:
- Around line 52-55: FlightCtlFormAlert currently concatenates className with a
literal space causing a trailing space when className is falsy; in the
FlightCtlFormAlert component update the className construction so the extra
space is only added when a non-empty className exists (e.g., join base
"fctl-form-alert" with the incoming className conditionally or build the string
by appending `" " + className` only when className is truthy) and pass that into
the Alert component's className prop to avoid the cosmetic trailing space.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 80382d93-0462-4c69-8ff3-07f0a58c0a34

📥 Commits

Reviewing files that changed from the base of the PR and between d6bed50 and 0e956e1.

📒 Files selected for processing (15)
  • libs/ui-components/src/components/Catalog/EditWizard/steps/UpdateStep.tsx
  • libs/ui-components/src/components/Catalog/InstallWizard/steps/AppConfigStep.tsx
  • libs/ui-components/src/components/Catalog/InstallWizard/steps/ReviewStep.tsx
  • libs/ui-components/src/components/Catalog/InstallWizard/steps/SelectTargetStep.tsx
  • libs/ui-components/src/components/Catalog/InstallWizard/steps/SpecificationsStep.tsx
  • libs/ui-components/src/components/Device/EditDeviceWizard/steps/ApplicationTemplates.tsx
  • libs/ui-components/src/components/Device/EditDeviceWizard/steps/ConfigurationTemplates.tsx
  • libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceTemplateStep.tsx
  • libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceUpdateStep.tsx
  • libs/ui-components/src/components/Fleet/CreateFleet/steps/DeviceLabelSelector.tsx
  • libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdatePolicyStep.tsx
  • libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdateStepRolloutPolicy.tsx
  • libs/ui-components/src/components/ImageBuilds/CreateImageBuildWizard/steps/OutputImageStep.tsx
  • libs/ui-components/src/components/form/FlightCtlForm.css
  • libs/ui-components/src/components/form/FlightCtlForm.tsx

Comment thread libs/ui-components/src/components/form/FlightCtlForm.tsx
@celdrake

Copy link
Copy Markdown
Collaborator Author

We're clarifying exact requirements with UX.

@celdrake celdrake marked this pull request as draft June 16, 2026 06:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant